html,
body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:root[theme="light"] {
    --checked-color: rgba(25, 25, 25, 0.2);
    --control-background-color: #ffffff;
    --primary-color: #0e62d7;
    --secondary-color: #6a9ee6;
    --foreground-color: #333;
    --border-color: #dddddd;
    --background-color: #eeeeee;
    --panel-background-color: #ffffff;
    --hover-background-color: rgba(25, 25, 25, 0.15);
    --titlebar-forground-color: #333;
    --titlebar-background-color: #eeeeee;
    --title-background: rgba(25, 25, 25, 0.08);
    --title-checked: #ffffff;
    --statusbar-foreground-color: #333;
    --statusbar-background-color: #eeeeee;
    --viewport-background-color: #888;
}

:root[theme="dark"] {
    --checked-color: rgba(25, 25, 25, 0.2);
    --color: red;
    --border: solid 1px lightgray;
    --titlebarBackground: #dddddd;
    --ribbonHeaderBackgound: #dddddd;
    --ribbonPanelBackground: #eeeeee;
    --ribbonGroupBackground: #ffffff;
    --quickbarIcon: #666;
    --quickbarIconHover: #444;
    --contextBackground: #eeeeee;
    --sidebarBackground: #eeeeee;
    --viewportBackground: #888;
    --statusbarBackground: #dddddd;
    --hover: rgba(255, 255, 255, 0.35);
    --hoverBackground: rgba(25, 25, 25, 0.1);
    --selected: #eeeeee;
}
